<template>
  <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
    <div class="app-container">
      <div class="mine-head">
        <div class="mine-head-left">
          <van-image :src="Banner1" round width="3rem" height="3rem" />
          <!-- <van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" size="32" color="#ffffff" /> -->
        </div>
        <div class="mine-head-right">
          <div>
            <h4>
              ID:{{
                state.paramsData.userId ? state.paramsData.userId : userId
              }}
            </h4>
            <p>vip会员</p>
          </div>
          <!-- <van-button type="primary" size="small" @click="settingMine"
            >退出</van-button
          > -->
        </div>
      </div>
      <div class="mine-main">
        <van-tabs v-model:active="active" @change="tabsChange()" animated>
          <van-tab title="主播">
            <div class="list-box" v-if="active == 0">
              <div class="list-left" v-if="goodsListLeft.length">
                <template v-for="item in goodsListLeft" :key="item">
                  <GoodItem :goodsItemDetail="item" />
                </template>
              </div>
              <div class="list-right" v-if="goodsListRight.length">
                <template v-for="item in goodsListRight" :key="item">
                  <GoodItem :goodsItemDetail="item" />
                </template>
              </div>
            </div>
            <div class="vip-photo-none" v-if="!anchorList.length">
              <van-empty image="error" image-size="80" description="暂无数据" />
            </div>
          </van-tab>
          <van-tab title="照片">
            <div class="anchor-main-list" v-if="active == 1">
              <div class="list-img-box" v-if="anchorPhotoList.length">
                <div
                  class="list-img-item"
                  v-for="item in goodsList"
                  :key="item.h5Id"
                >
                  <div class="timer-box">
                    <van-image
                      width="48"
                      height="48"
                      round
                      :src="'http://dytestoss.oss-cn-beijing.aliyuncs.com/2024/07/13/183b20029c094cca98deb00d2c6965a4.jpg?x-oss-process=image/resize,w_100,h_200'"
                      fit="cover"
                    />
                    <p>糖糖</p>
                  </div>
                  <div class="anchor-box">
                    <AnchorItem :dateItemDetail="item" />
                    <p>2024-05-07</p>
                  </div>
                </div>
              </div>
              <div class="vip-photo-none" v-else>
                <van-empty
                  image="error"
                  image-size="80"
                  description="暂无数据"
                />
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </van-pull-refresh>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import Banner1 from "@/assets/image/icon_hand1.png";
import { showToast } from "vant";

import userOrderStore from "@/store/index.js";
import EventBus from "@/utils/EventBus";

import { GetClientAnchorList } from "@/api/mine/index.js";

let userInfo = userOrderStore();

import GoodItem from "@/components/goodsItem/index.vue";
import AnchorItem from "@/components/anchorItem/index.vue";

const route = useRoute();
const router = useRouter();

const state = reactive({
  userId: "",
  goodsList: [],
  paramsData: {
    code:route.query.id,
    pageSize: 10,
    pageNum: 1,
  },
});

const { goodsList, userId } = toRefs(state);

let anchorList = ref([]);

let anchorPhotoList = ref([]);

let goodsListLeft = computed(() =>
  anchorList.value.filter((o, i) => i % 2 == 0)
);
let goodsListRight = computed(() =>
  anchorList.value.filter((o, i) => i % 2 == 1)
);

let active = ref(0);
const tabsChange = () => {
  state.paramsData.clientId = localStorage.getItem("userId");
  state.goodsList =
    active.value == 0 ? anchorList.value : anchorPhotoList.value;
  if (!loadingRefresh.value) {
    userInfo.setIsPageLoading(true);
  }
  if (active.value == 0) {
    state.paramsData.pageNum = 1;
    anchorList.value = [];
    console.log(state.paramsData, "state.paramsData");
    getClientAnchorListFn(state.paramsData);
  } else {
    userInfo.setIsPageLoading(false);
    loadingRefresh.value = false;
  }
};

const getClientAnchorListFn = async (paramsData) => {
  try {
    let {data} = await GetClientAnchorList(paramsData);
    anchorList.value = data;
    state.goodsList = data;
    userInfo.setIsPageLoading(false);
    loadingRefresh.value = false;
  } catch (error) {
    loadingRefresh.value = false;
    userInfo.setIsPageLoading(false);
  }
};

const settingMine = () => {
  localStorage.clear();
  router.push({
    name: "register",
  });
};

let loadingRefresh = ref(false);
const onRefresh = () => {
  state.paramsData.pageNum = 1;
  anchorList.value = [];
  state.goodsList = [];
  loadingRefresh.value = true;
  tabsChange();
};

onMounted(() => {
  if (route.query.id) {
    localStorage.setItem("id", route.query.id);
    localStorage.setItem("token", route.query.id);
    localStorage.setItem("userId", route.query.id);
  }
  state.userId = localStorage.getItem("userId");
  tabsChange();
});
</script>



<style lang="scss" scoped>
.mine-head {
  display: flex;
  padding: 10px;
  align-items: center;
  background-color: #fff;

  .mine-head-left {
    height: 3em;
  }

  .mine-head-right {
    margin-left: 10px;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    h4 {
      font-weight: normal;
      margin-bottom: 5px;
      color: #666;
      font-size: 14px;
    }

    p {
      font-size: 12px;
      color: #333;
    }
  }
}

.mine-main {
  margin-top: 5px;
}

.app-container {
  background: #f2f2f2;
  overflow: auto;
  min-height: 100vh;
}

.footer-tips {
  color: #999;
  text-align: center;
  margin-top: 10em;
}
</style>
